<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Ajax使用JQuery -->
    <!-- <script src="js/jquery-3.4.1.js"></script> -->
    <style>
    *{
        margin:0;
        padding:0;
    }

    .itemBox{
        width: 75%;
        margin: 0 auto;
        position: relative;
    }

    .item{
        padding: 2px;
        border:1px solid #ccc;
        position:absolute;
        width:18%;
    }

    img{
        width:100%;
    }
    </style>

</head>
<body>
    <div class="itemBox">
        <div class="item">
            <img src="img/1.png" alt="">
        </div>
        <div class="item">
            <img src="img/2.png" alt="">
        </div>
        <div class="item">
            <img src="img/3.png" alt="">
        </div>
        <div class="item">
            <img src="img/4.png" alt="">
        </div>
        <div class="item">
            <img src="img/5.png" alt="">
        </div>
        <div class="item">
            <img src="img/6.png" alt="">
        </div>
        <div class="item">
            <img src="img/7.png" alt="">
        </div>
        <div class="item">
            <img src="img/8.png" alt="">
        </div>
        <div class="item">
            <img src="img/9.png" alt="">
        </div>
        <div class="item">
            <img src="img/10.png" alt="">
        </div>
        <div class="item">
            <img src="img/11.png" alt="">
        </div>
        <div class="item">
            <img src="img/12.png" alt="">
        </div>
        <div class="item">
            <img src="img/13.png" alt="">
        </div>
        <div class="item">
            <img src="img/14.png" alt="">
        </div>
        <div class="item">
            <img src="img/1.png" alt="">
        </div>

        <!-- js部分 -->
        <script>
                var itemBox = document.getElementsByClassName('itemBox')[0];
                var items = itemBox.children;
           window.onload = function(){
               // 进来就调用一次
               waterFall();
               
               function waterFall(){
               var itemBoxW = itemBox.offsetWidth;
               var itemW = items[0].offsetWidth ;
               var column = parseInt(itemBoxW/itemW);
               var distance = (itemBoxW-itemW*column)/column-1;               
               var arr = [];

                   for(var i=0; i<items.length;i++){
                       if(i<column){
                           items[i].style.left = (itemW+distance)*i+'px';
                           arr[i] = items[i].offsetHeight;
                       }else{
                           var minHeight = arr[0];
                           var index = 0;
                           for(var j = 0; j < arr.length; j++){
                               if(minHeight>arr[j]){
                                   minHeight = arr[j];
                                   index = j;
                               }
                           }
                           items[i].style.left = (itemW+distance)*index+'px';
                           items[i].style.top = minHeight + distance + 'px';
                           arr[index] = minHeight + distance + items[i].offsetHeight;
                       }
                   }
              }
              window.onresize = function(){
                   waterFall();
               }
               
               window.onscroll = function(){
                   if(window.pageYOffset+window.innerHeight>items[items.length-1].offsetTop){
                    //    getData();

                    // Ajax调用前注释以下代码
                       var data = [{src:"img/12.png"},
    {src:"img/11.png"},
    {src:"img/1.png"},
    {src:"img/14.png"},
    {src:"img/5.png"},
    {src:"img/13.png"},
    {src:"img/4.png"},
    {src:"img/7.png"},
    {src:"img/6.png"},
    {src:"img/3.png"},
    {src:"img/2.png"},
    {src:"img/9.png"},
    {src:"img/8.png"}];
                       for(var i= 0; i<data.length;i++){
                           var div = document.createElement('div');
                           div.className = 'item';
                           var img = document.createElement('img');
                           img.src = data[i].src;
                           div.appendChild(img);
                           itemBox.appendChild(div);
                       }
                       waterFall();
                       
                       // Ajax调用前注释以上代码
                   }
               }

            //    Ajax方式调用

        //        function getData(){
        //         $.ajax({
        //                type:'get',
        //                url:'./waterFall.php',
        //                data:{username:123},
        //                dataType:'json',
        //                success:function(data){
        //                    var data = eval(data)
        //                 //    console.log(data[0].src);
        //                for(var i= 0; i<data.length;i++){
        //                    var div = document.createElement('div');
        //                    div.className = 'item';
        //                    var img = document.createElement('img');
        //                    img.src = data[i].src;
        //                    div.appendChild(img);
        //                    itemBox.appendChild(div);
        //                }
        //                waterFall();
        //          }
        //      });
        //    }
          
        }
               
       
           </script>
</body>
</html>